<template>
  <view class="user-center-page">
    <scroll-view class="scroll-content" :scroll-y="true">
      <!-- 个人信息头图 -->
      <header class="profile-header" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
        <view class="user-info-wrapper">
          <image :src="userInfo.avatar" class="profile-avatar" mode="aspectFill"></image>
          <view class="profile-info">
            <h2 class="username">{{ userInfo.name }}</h2>
            <p class="welcome-text">欢迎回来，开启洁净生活</p>
          </view>
        </view>
        <view class="edit-profile-btn" @click="gotoProfileEdit">
          <uni-icons type="compose" size="14" color="#fff"></uni-icons>
          <text>编辑</text>
        </view>
      </header>

      <!-- 主要内容区 -->
      <view class="main-content">
        <!-- 我的订单卡片 -->
        <view class="card orders-card">
          <view class="card-header">
            <h3 class="card-title">我的订单</h3>
            <view class="see-all" @click="gotoOrderList('all')">
              <text>查看全部</text>
              <uni-icons type="right" size="14" color="#888"></uni-icons>
            </view>
          </view>
          <view class="order-status-grid">
            <view class="status-item" @click="gotoOrderList('unpaid')">
              <uni-icons type="wallet" size="28" :color="iconColor"></uni-icons>
              <text>待付款</text>
            </view>
            <view class="status-item" @click="gotoOrderList('servicing')">
              <uni-icons type="calendar" size="28" :color="iconColor"></uni-icons>
              <text>待服务</text>
            </view>
            <view class="status-item" @click="gotoOrderList('reviewing')">
              <uni-icons type="star" size="28" :color="iconColor"></uni-icons>
              <text>待评价</text>
            </view>
            <view class="status-item" @click="gotoOrderList('completed')">
              <uni-icons type="checkbox-filled" size="28" :color="iconColor"></uni-icons>
              <text>已完成</text>
            </view>
          </view>
        </view>

        <!-- 工具列表卡片 -->
        <view class="card tool-list">
          <view class="tool-item" @click="gotoAddressManage">
            <uni-icons type="location" size="22" :color="iconColor"></uni-icons>
            <text class="label">地址管理</text>
            <uni-icons type="right" size="16" color="#bbb"></uni-icons>
          </view>
          <view class="tool-item" @click="contactService">
            <uni-icons type="chatbubble-filled" size="22" :color="iconColor"></uni-icons>
            <text class="label">联系客服</text>
            <uni-icons type="right" size="16" color="#bbb"></uni-icons>
          </view>
        </view>
        
        <!-- 退出登录按钮 -->
        <button class="logout-btn" @click="logout">退出登录</button>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { reactive } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { useSystemInfo } from '@/composables/useSystemInfo';
import { BASE_URL } from '@/utils/config.js';

const { safeAreaInsets } = useSystemInfo();
const iconColor = "#4A90E2";

// ---- 响应式状态定义 ----
const userInfo = reactive({
  name: '未登录',
  avatar: '/static/icons/default-avatar.svg', // 默认头像
});

// ---- Methods ----
const loadUserInfo = () => {
  // 从本地存储中读取用户信息
  const storedUserInfo = uni.getStorageSync('userInfo');
  if (storedUserInfo) {
    userInfo.name = storedUserInfo.userName;
    // 拼接完整的头像URL
    userInfo.avatar = `${BASE_URL}${storedUserInfo.userImg}`;
  } else {
    // 如果未登录，可以跳转到登录页或显示未登录状态
    console.log("用户未登录");
  }
};

const gotoProfileEdit = () => {
  uni.navigateTo({ url: '/pages/user/profile-edit' });
};

const gotoOrderList = (status) => {
  uni.navigateTo({ url: `/pages/user/order-list?status=${status}` });
};

const gotoAddressManage = () => {
  uni.navigateTo({ url: '/pages/user/address-manage' });
};

const contactService = () => {
  uni.makePhoneCall({ phoneNumber: '400-123-4567' }); // 模拟拨打电话
};

const logout = () => {
  uni.showModal({
    title: '提示',
    content: '您确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // [关键] 清除所有本地存储的登录信息
        uni.clearStorageSync();
        // 跳转到登录页
        uni.reLaunch({ url: '/pages/login/login' });
      }
    }
  });
};

// ---- 生命周期钩子 ----
onShow(() => {
  // 每次进入该页面都从本地存储加载最新的用户信息
  // 这样在修改信息后返回，数据也能同步更新
  loadUserInfo();
});
</script>

<style lang="scss" scoped>
.user-center-page {
  height: 100vh;
  background-color: $uni-bg-color;
}

.scroll-content {
  height: 100%;
}

.profile-header {
  height: 440rpx;
  background: linear-gradient(135deg, $uni-primary, $uni-accent);
  padding: 0 40rpx;
  color: $uni-bg-color-white;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-info-wrapper {
  display: flex;
  align-items: center;
  gap: 30rpx;
}

.profile-avatar {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  border: 4rpx solid rgba(255, 255, 255, 0.5);
}

.profile-info {
  .username {
    font-size: 40rpx;
    font-weight: 500;
    margin-bottom: 16rpx;
  }
  .welcome-text {
    font-size: 28rpx;
    opacity: 0.8;
  }
}

.edit-profile-btn {
  display: flex;
  align-items: center;
  gap: 10rpx;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 12rpx 24rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
}

.main-content {
  margin-top: -60rpx; /* 让卡片上移 */
  position: relative;
  padding: 0 30rpx;
}

.card {
  background: $uni-bg-color-white;
  border-radius: 24rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.07);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  border-bottom: 1px solid $uni-bg-color;
  .card-title {
    font-size: 32rpx;
    font-weight: 500;
  }
  .see-all {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: $uni-text-color-light;
  }
}

.order-status-grid {
  display: flex;
  justify-content: space-around;
  padding: 40rpx 0;
}

.status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
  font-size: 26rpx;
  color: $uni-text-color;
}

.tool-list {
  .tool-item {
    display: flex;
    align-items: center;
    padding: 32rpx 40rpx;
    border-bottom: 1px solid $uni-bg-color;
    &:last-child {
      border-bottom: none;
    }
    .label {
      flex-grow: 1;
      font-size: 30rpx;
      margin-left: 30rpx;
    }
  }
}

.logout-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  margin-top: 40rpx;
  background-color: $uni-bg-color-white;
  border: 1px solid $uni-border-color;
  color: $uni-color-error;
  text-align: center;
  border-radius: 45rpx;
  font-size: 32rpx;
}
</style>